<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="/static/lib/datatables/1.10.15/jquery.dataTables.css">
    <div th:include="admin/common :: head"></div>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/static/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/static/lib/respond.min.js"></script>
    <![endif]-->


    <style type="text/css">

        th {
            text-align: center;
        }

        .table td {
            text-align: center;
        }
    </style>
    <title>详情页面</title>
</head>
<body>

<!--上面那部分-->
<div class="cl pd-20" style=" background-color:#5bacb6">
    <!-- 教师头像默认保存在home/teacherImg -->
    <img class="avatar size-XL l" th:src="${courseDTO.courseImg}">
    <dl style="margin-left:80px; color:#fff">
        <dt>
            <span class="f-18" th:text="${courseDTO.courseName}" ></span>
            <!--<span class="pl-10 f-12">余额：**</span>-->
            <span class="pl-10 f-12" th:text="课程编号【+${courseDTO?.classnum}+】"></span>
        </dt>
        <dd class="pt-10 f-12" style="margin-left:0" th:text="课程类型【+${courseDTO?.myCourseType?.name}+】"></dd>
    </dl>
</div>


<div class="cl pd-5 bg-1 bk-gray mt-20">

    <span class="l">
		<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
		<i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
	</span>
    <span class="r" >共有数据：<div style="display:inline;line-height:31px" th:text="${courseDTO?.courseExperimentList.size()} ">条</div></span>
</div>


<!--从这里开始是表格-->
<div class="page-container">
    <div class="mt-20">
        <table id="sheetList" class="table table-border table-bordered table-bg
        table-hover table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="80">实验ID</th>
                <th>实验标题</th>
                <th  width="120">创建时间</th>
                <th  width="120">截止时间</th>
                <th >实验详情</th>
                <th >学生详情</th>
                <th >统计</th>
                <th>是否截止</th>
                <th >操作</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="courseExperiment,courseExperimentList : ${courseDTO.courseExperimentList}" >
                <td><input type="checkbox" th:value="${courseExperiment?.courExperimentId}"  name=""></td>
                <td th:text="${courseExperiment?.courExperimentId}"></td>
                <td th:text="${courseExperiment?.title}"></td>
                <td th:text="${#dates.format(courseExperiment?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                <td th:text="${#dates.format(courseExperiment?.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>

                <td ><span class="label label-success radius">
					    <a style="text-decoration:none" class="ml-5"
                           th:onclick="|courseTask_show('题目详情','/admin/course/courseExperimentDetail/question/${courseExperiment?.courExperimentId }','${courseExperiment?.courExperimentId }')|"
                           href="javascript:;" title="题目详情">实验详情</a></span>
                </td>

                <td ><span class="label label-success radius">
					<a style="text-decoration:none" class="ml-5"
                       th:onclick="|courseTask_show('学生详情','/admin/course/courseExperimentDetail/user/${courseExperiment?.courExperimentId }','${courseExperiment?.courExperimentId }')|"
                       href="javascript:;" title="学生详情">学生详情</a></span>
                </td>

                <td ><span class="label label-success radius">
					<a style="text-decoration:none" class="ml-5"
                       th:onclick="|courseTask_show('统计','/admin/course/courseExperimentDetail/analysis/${courseExperiment?.courExperimentId }','${courseExperiment?.courExperimentId }')|"
                       href="javascript:;" title="统计">统计</a></span>
                </td>

                <td th:if="${courseExperiment.status}==1" >
                    <span class="label label-secondary radius">进行中</span>
                </td>
                <td th:if="${courseExperiment.status}==0" >
                    <span class="label label-warning radius">已截止</span>
                </td>

                <td class="td-manage">
                    <a title="删除" href="javascript:;" th:onclick="|javascript:courseTask_detele(this,'${courseExperiment?.courExperimentId}')|"
                       class="ml-5" style="text-decoration:none">
                        <i class="Hui-iconfont">&#xe6e2;</i></a>
                </td>

            </tr>
            </tbody>
        </table>
    </div>

</div>

<!--到这里开始是表格-->



<div class="pd-20">
    <table class="table">
        <tbody>


        </tbody>
    </table>
</div>

<div id="container" style="min-width:700px;height:400px"></div>


<footer th:include="admin/common :: footer"></footer>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/static/lib/datatables/1.10.15/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="/static/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>


<script type="text/javascript">



    $(function () {

        $('.table-sort').dataTable({
            "aaSorting":
                [
                    [
                        1,"desc"
                    ]
                ],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable":false,"aTargets":[0,2]}// 制定列不参与排序
            ]
        });
        //复选框类型查询
        $('.type').change(function(){
            $.ajax({
                url: 'admin/question/singleChoiceList',
                data: 'examType=' + $('.type').val(),
                type: 'get',
                success: function(data){
                    $('#sheetList').html(data);
                },
                error: function(){
                    alert('网络出错');
                }
            })
        })



        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '【学生课程所有实验提交情况饼状图】'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['总上交比率',   [[${yes}]] ],
                    ['总未上交比率',     [[${no}]] ],

                ]
            }]
        });


    });

    /*课程详情页面*/
    function courseTask_show(title,url,id,w,h){
        layer_show(title,url,w,h);
    }



</script>

</body>
</html>